<route type="home" lang="json5">
{
  style: { navigationStyle: 'custom' }
}
</route>

<template>
  <view class="full-page" :style="{ paddingTop: safeArea.top + 'px', paddingBottom: safeArea.bottom + 'px' }">
    <!-- 欢迎装饰图片，横向居中 -->
    <view class="welcome-img">
      <wd-img :width="280" :height="280" :src="welcomeImg" />
    </view>
    <!-- 会员信息 -->
    <view class="member-area">
      <!-- 会员信息,矩形,带外边距，四角为圆角，背景色为微微发黄的白色, -->
      <view class="member-introduce" @click="toPageMine()">
        <!--  头像，在member-introduce左侧  -->
        <view class="member-avatar">
          <wd-img :width="60" :height="60" round :src="avatarImg" />
        </view>
        <!-- 用户名 字体颜色#EAAF75，在头像右侧,在member-introduce纵向居中 -->
        <view class="member-nickname">
          <text>{{ nickname }}</text>
        </view>
        <!-- 会员码 标志 ，在整个member-introduce最右侧 -->
        <view class="member-qrcode">
          <wd-img :width="50" :height="50" round :src="memberQrcodeImg" />
        </view>
      </view>
    </view>
    <!-- 功能区 下面三个正方形方块，四个角圆角，背景色为#fdfaf0，grid布局，横向排列  -->
    <view class="func-area">
      <view class="func-block" @click="toTabBarMenu()">
        <view class="func-item-name">
          <text>来杯奶茶</text>
        </view>
        <view class="func-item-img-c">
          <wd-img :width="70" :height="70" round :src="drinkImg" />
        </view>
      </view>

      <view class="func-block" @click="toPagePointMall()">
        <view class="func-item-name">
          <text>积分商城</text>
        </view>
        <view class="func-item-img-c">
          <wd-img :width="70" :height="70" round :src="pointGiftImg" />
        </view>
      </view>

      <view class="func-block" @click="toPageDiscountTicket()">
        <view class="func-item-name">
          <text>会员卡券</text>
        </view>
        <view class="func-item-img-c">
          <wd-img :width="70" :height="70" round :src="palletImg" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import welcomeImg from '@/static/images/welcome.png'
import defaultAvatarImg from '@/static/images/mine/avatar.png'
import memberQrcodeImg from '@/static/images/mine/member-qrcode.png'
import palletImg from '@/static/images/mine/pallet.png'
import drinkImg from '@/static/images/mine/drink-tea.png'
import pointGiftImg from '@/static/images/mine/point-gift.png'
import { useUserStore } from '@/store'

// 定义安全区域信息的响应式变量
const safeArea = ref({
  top: 0,
  bottom: 0
})
// 设置默认 昵称，未登录时提示点击登录
const nickname = ref()
// 设置 默认头像
const avatarImg = ref()
// 获取登录
const loginFlag = ref(false)

onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  // 设置安全区域信息
  safeArea.value = {
    top: systemInfo.safeAreaInsets.top,
    bottom: systemInfo.safeAreaInsets.bottom
  }
  const userStore = useUserStore()
  nickname.value = userStore.getUserInfo().user?.nickName || '点我登录哦'
  avatarImg.value = userStore.getUserInfo().user?.avatar || defaultAvatarImg
  // 获取用户信息
  loginFlag.value = userStore.isLogined
  console.log('是否登录: ', loginFlag.value)
  console.log(userStore.getUserInfo().user)

  // console.log(nickname.value )
})

const toPageMine = () => {
  // 跳转菜单页/pages/menu/index
  uni.navigateTo({
    url: '/pages/mine/index'
  })
}

const toTabBarMenu = () => {
  // 跳转菜单页/pages/menu/index
  uni.switchTab({
    url: '/pages/menu/index'
  })
}

const toPagePointMall = () => {
  // 跳转积分商城页
  uni.navigateTo({
    url: '/pages/point-mall/index'
  })
}

const toPageDiscountTicket = () => {
  if (loginFlag.value) {
    // 跳转优惠券页
    uni.navigateTo({
      url: '/pages/discountTicket/index'
    })
  } else {
    // 跳转登录
    uni.navigateTo({
      url: '/pages/login/login'
    })
  }
}
</script>

<style lang="scss" scoped>
.full-page {
  background-color: #fbece5;
  min-height: calc(100vh);
}

.welcome-img {
  display: flex;
  justify-content: center;
}

.member-area {
  padding: 0 25rpx;
}

.member-introduce {
  background-color: #fdfaf0; /* 微微发黄的白色 */
  border-radius: 20rpx; /* 四角为圆角 */
  padding: 25rpx;
  margin-bottom: 15rpx; /* 带外边距 */
  display: flex;
  align-items: center;
}

.member-avatar {
  margin-right: 25rpx;
}

.member-nickname {
  color: #f69947;
  flex: 1;
}

.member-qrcode {
  margin-left: auto;
}

.func-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 25rpx;
}

.func-block {
  background-color: #fdfaf0;
  border-radius: 20rpx;
  aspect-ratio: 1 / 1; /* 使方块为正方形 */
  position: relative;
}

.func-item-name {
  color: #f69947;
  position: absolute;
  top: 15rpx;
  left: 15rpx;
}

.func-item-img-a {
  position: absolute;
  bottom: 5rpx;
  left: 1rpx;
}

.func-item-img-c {
  position: absolute;
  bottom: 5rpx;
  right: 1rpx;
}
</style>
